var iS = 2;
class imgSwitch {
    constructor() {
        //获取节点
        // 获取节点对象
        this.boxObj = $('.left-nav-img');
        this.imgBoxObj = $('.img-box');
        this.imgListObj = $('.img-box li');
        this.imgIndexObj = $('.img-index-box');
        // console.log(this.imgListObj.length);
        // 调用创建图片索引序号的方法
        this.createImgList();
        // 图片序号初始值
        this.indexNum = 0;
        // 创建定时器
        this.timeOne = '';
        // 给左右按钮绑定点击事件
        $('.spirte-bg-left').click(this.leftSpirte.bind(this));
        $('.spirte-bg-right').click(this.rightSpirte.bind(this));
        //设置一个判断 每1.5秒之间只能点击一次;
        this.flag = true;
        // 设置进入页面时自动播放
        this.autoSwitch();
        // 设置鼠标悬停时停止自动轮播
        // 给box绑定鼠标移入移出事件
        this.boxObj.mouseover(this.stopSwitch.bind(this));
        this.boxObj.mouseout(this.startSwitch.bind(this));
    }
    // 构造创建图片索引序号的方法
    createImgList() {
        // 获取图片索引的长度
        let imgLength = this.imgListObj.length;
        // 循环创建节点标签
        for (let i = 0; i < imgLength; i++) {
            let a = $("<a class = 'img-index'>○</a>");
            a.href = 'javascript:';
            i == 0 && (a.html('●'));
            i == 0 && (a.addClass('selected'));
            a.attr('index', i);
            this.imgIndexObj.append(a);
            // console.log(a);
            // 调用给所有标签绑定点击事件的方法
            a.click(this.imgListFn.bind(this));
        }
        this.imgIndexObj = $('.img-index-box a');
    };
    // 构造图片索引标签绑定点击事件的方法
    imgListFn(eve) {
        let ele = eve.target;
        this.imgListObj[this.indexNum].classList.remove('initial');
        this.indexNum = ele.getAttribute('index') - 0;
        // 调用图片切换的方法
        this.switching();
    }
    // 构造选中序号的方法
    selectIndexFn() {
        $('.selected').html('○');
        $('.selected').removeClass('selected');
        this.imgIndexObj[this.indexNum].classList.add('selected');
        this.imgIndexObj[this.indexNum].innerHTML = '●';
        this.flag = true;
    }
    switching() {
        if (this.indexNum == this.imgListObj.length) this.indexNum = 0;
        if (this.indexNum <= -1) this.indexNum = this.imgListObj.length - 1;
        this.imgListObj[this.indexNum].classList.add('initial');
        this.selectIndexFn();
    }
    // 两侧箭头的点击事件
    // 右侧
    rightSpirte() {
        if(!this.flag) return;
        this.flag = false;
        this.imgListObj[this.indexNum].classList.remove('initial');
        this.indexNum += 1;
        this.switching();
    }
    // 左侧
    leftSpirte() {
        if(!this.flag) return;
        this.flag = false;
        this.imgListObj[this.indexNum].classList.remove('initial');
        this.indexNum -= 1;
        this.switching();
    }
    // 构造鼠标移入停止播放的方法
    stopSwitch() {
        // 停止播放
        clearInterval(this.timeOne);
    }
    // 构造鼠标移出开始播放的方法
    startSwitch() {
        // 开始播放
        this.autoSwitch();
    }
    // 自动播放
    autoSwitch() {
        this.timeOne = setInterval(() => {
            this.rightSpirte();
        }, 2000)
    }
}

new imgSwitch;